<!-- 店铺列表 -->
<template>
    <div v-loading="loading" class="cp-container" style="min-height: 200px;">
        <el-row :gutter="24">
            <el-col v-for="(item, index) in list" :key="index" :span="6">
                <service-list :listitem="item"></service-list>
            </el-col>
        </el-row>
        <div v-if="!loading && total === 0" class="no-data">
            <span class="icon icon-no-data">
                <span>暂无服务</span>
            </span>
        </div>
        <div v-if="total > 0" style="text-align: center; padding: 20px 0;">
            <el-pagination
                class="public-page"
                background
                :current-page="search.pageNumber"
                :page-size="search.pageSize"
                :total="total"
                prev-text="上一页"
                next-text="下一页"
                layout="prev, pager, next"
                @current-change="pageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Component
} from 'nuxt-property-decorator'
import serviceList from '~/components/common/servicelist.vue'
import {getQiaoSupplyListByClass} from '~/api/shop'
@Component({
    layout: 'shop',
    components: {
        serviceList
    },
    head () {
        const that = this as any
        const className = that.className
        return {
            title: `${className}-CIIP供需中心`,
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: `建筑行业供方店铺，在这里你可以查看${className}相关服务，找到适合自己的服务项目。`
                },
                {
                    hid: 'keywords',
                    name: 'keywords',
                    content: `建筑服务方，找服务商，${className}`
                }
            ]
        }
    },
    validate ({params, store}) {
        const flag = /^\d+$/.test(params.id) && /^\d+$/.test(params.class)
        if (flag) {
            store.commit('setShopId', params.id)
        }
        return flag
    }
})
export default class PageCaseDetail extends Vue {
    loading: boolean = false
    total: number = 0
    search: any = {
        pageSize: 10,
        pageNumber: 1,
        classId: '',
        shopid: ''
    }
    list: [] = []
    mounted () {
        const params = this.$route.params
        this.search.shopid = params.id
        this.search.classId = params.class
        this.getList()
    }
    pageChange (val: number) {
        this.search.pageNumber = val
        this.getList()
    }
    async getList () {
        this.loading = true
        const {data}: any = await getQiaoSupplyListByClass(this.search)
        if (data.flag) {
            this.list = data.data.content
            this.total = data.data.totalElements
        } else {
            this.$message.error(data.msg)
        }
        this.loading = false
    }
    get className () {
        let name: string = '服务分类'
        const cid: string = this.$route.params.class
        const tree = this.$store.state.tree
        tree.forEach((item: any) => {
            if (item.id === cid) {
                name = item.text
            }
        })
        return name
    }
}
</script>
